<template>
  <div>
    <el-card shadow="hover" class="mt-20">
      <el-button
        type="primary"
        :icon="Plus"
        @click="addAttrs"
        :disabled="Boolean(!store.category3Id)"
        >添加属性</el-button
      >
      <el-table border :data="attrList" class="mt-20">
        <el-table-column
          label="序号"
          type="index"
          width="100px"
          align="center"
        ></el-table-column>
        <el-table-column
          label="属性名称"
          prop="attrName"
          width="200px"
        ></el-table-column>
        <el-table-column label="属性值列表" width="600px">
          <!-- 通过默认插槽获取每行数据 -->
          <template v-slot="{ row }">
            <el-tag
              class="ml-2"
              type="success"
              v-for="value in row.attrValueList"
              :key="value.id"
              >{{ value.valueName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250px">
          <template #default="{ row }">
            <el-button
              type="primary"
              :icon="Edit"
              @click="editAttr(row)"
            ></el-button>
            <el-popconfirm
              :title="`确认删除${row.attrName}属性嘛`"
              @confirm="deleteAttr(row.id)"
            >
              <template #reference>
                <el-button type="danger" :icon="Delete"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "AttrList",
});
import { watch, ref } from "vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { useCategoryStore } from "@/stores/category.ts";
import {
  reqGetAttrInfoList,
  reqDeleteAttr,
} from "@/api/product/getCategory.ts";
import type { AttrListData } from "@/api/product/models/getCategoryType.ts";
import { AttrListItem } from "@/api/product/models/getCategoryType.ts";

//引入pinia 存数据
import { useAttrStore } from "@/stores/attr.ts";
const attrStore = useAttrStore();

//4、删除同Id
const deleteAttr = async (id: number) => {
  await reqDeleteAttr(id);
  ElMessage({
    type: "success",
    message: "删除成功",
  });
  //重新获取数据
  attrListApi();
};

//3、点击编辑按钮，
const editAttr = (row: AttrListItem) => {
  //显示AddOrEdit组件
  emit("setShow");
  //获取数据，通过pinia传给AddOrEdit组件
  attrStore.id = row.id;
  attrStore.attrName = row.attrName;
  attrStore.attrValueList = row.attrValueList;
};
//2、添加功能
const emit = defineEmits(["setShow"]);
const addAttrs = () => {
  emit("setShow");
  //点添加功能清空编辑数据
  attrStore.attrName = "";
  attrStore.attrValueList = [];
};

//1、获取数据，初始化渲染
//store 数据
const store = useCategoryStore();
//获取属性列表
const attrList = ref<AttrListData>([]);

const attrListApi = async () => {
  if (!store.category3Id) {
    return;
  }
  const result = await reqGetAttrInfoList(
    store.category1Id as number,
    store.category2Id as number,
    store.category3Id as number
  );
  //获取数据列表
  attrList.value = result;
};

//当三级分类列表有id，就发送请求获取数据
watch(
  () => store.category3Id,

  async () => {
    // if (!store.category3Id) {
    //   return;
    // }
    // const result = await reqGetAttrInfoList(
    //   store.category1Id as number,
    //   store.category2Id as number,
    //   store.category3Id as number
    // );
    // //获取数据列表
    // attrList.value = result;

    attrListApi();
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.ml-2 {
  margin-right: 10px;
}
</style>
